<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				display: flex;
				flex-wrap: wrap;
			}

			ul {
				margin: 15px;
				text-align: left;
				height: 300px;
				width: 150px;
				border: 1px solid #dddddd;

			}

			ul li {
				list-style: none;
			}

			ul li>img {
				width: 120px;
				height: 100px;
			}

			ul li:nth-child(2) {
				font-weight: bold;
			}

			ul li:nth-child(4) {
				text-decoration: line-through;
			}

			ul li:nth-child(5) {
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>商品列表</h1>
		
		<button type="button" id="priceBtn">按价格排序</button>
		<button type="button" id="salesBtn">按销量排序</button>
		<button type="button" id="evaluateRtn">按评价排序</button>
		<div id="commodity">
			<!-- <ul >
				<li><img src="img/honor7.jpg" > </li>
				<li>iphone7 plugs</li>
				<li>土豪金</li>
				<li>5888.00</li>
				<li>5899.00</li>
				<li>1230</li>
				<li>288</li>
			</ul>
			<ul>
				<li><img src="img/honor7.jpg" > </li>
				<li>iphone7 plugs</li>
				<li>土豪金</li>
				<li>5888.00</li>
				<li>5899.00</li>
				<li>1230</li>
				<li>288</li>
			</ul> -->

		</div>


		<script type="text/javascript">
			//实现商品列表（根据价格，销量，评价排序）

			var data = [{
				id: '001',
				name: 'iphone7 plugs',
				imgurl: 'img/ip7.jpg',
				price: 5899.00,
				sale: 5888.00,
				color: '土豪金',
				evaluate: 288,
				sales: 1230
			}, {
				id: '002',
				name: 'Note7',
				imgurl: 'img/note7.jpg',
				price: 3899.00,
				sale: 998.00,
				color: '黑色',
				evaluate: 289,
				sales: 439
			}, {
				id: '003',
				name: '荣耀7',
				imgurl: 'img/honor7.jpg',
				price: 1999.00,
				sale: 1899.00,
				color: '白色',
				evaluate: 438,
				sales: 908
			}, {
				id: '004',
				name: 'iphone7 plugs',
				imgurl: 'img/ip7.jpg',
				price: 5999.00,
				sale: 5808.00,
				color: '土豪金',
				evaluate: 223,
				sales: 986
			}, {
				id: '005',
				name: 'Note7',
				imgurl: 'img/note7.jpg',
				price: 3892.00,
				sale: 998.00,
				color: '黑色',
				evaluate: 88,
				sales: 8798
			}, {
				id: '006',
				name: '荣耀7',
				imgurl: 'img/honor7.jpg',
				price: 1929.00,
				sale: 1099.00,
				color: '白色',
				evaluate: 2088,
				sales: 453
			}, {
				id: '007',
				name: 'iphone7 plugs',
				imgurl: 'img/ip7.jpg',
				price: 4899.00,
				sale: 2888.00,
				color: '土豪金',
				evaluate: 2880,
				sales: 88
			}, {
				id: '008',
				name: 'Note7',
				imgurl: 'img/note7.jpg',
				price: 5876.00,
				sale: 998.00,
				color: '黑色',
				evaluate: 3288,
				sales: 99
			}, {
				id: '009',
				name: '荣耀7',
				imgurl: 'img/honor7.jpg',
				price: 4999.00,
				sale: 1899.00,
				color: '白色',
				evaluate: 1288,
				sales: 645
			}, {
				id: '010',
				name: 'iphone7 plugs',
				imgurl: 'img/ip7.jpg',
				price: 5888.00,
				sale: 2899.00,
				color: '土豪金',
				evaluate: 2288,
				sales: 34
			}, {
				id: '011',
				name: 'Note7',
				imgurl: 'img/note7.jpg',
				price: 3299.00,
				sale: 978.00,
				color: '黑色',
				evaluate: 28,
				sales: 1213
			}, {
				id: '012',
				name: '荣耀7',
				imgurl: 'img/honor7.jpg',
				price: 1976.00,
				sale: 1899.00,
				color: '白色',
				evaluate: 3243,
				sales: 123
			}];
			
			priceBtn.onclick=function(){
				commodity.innerHTML=''
				data.sort(function(a,b){
					return b.sale - a.sale
				})
				fn()
			}
			salesBtn.onclick=function(){
				commodity.innerHTML=''
				data.sort(function(a,b){
					return b.sales - a.sales
				})
				fn()
			}
			evaluateRtn.onclick=function(){
				commodity.innerHTML=''
				data.sort(function(a,b){
					return b.evaluate - a.evaluate
				})
				fn()
			}

			function fn() {
				for (var i = 0; i < data.length; i++) {
					commodity.innerHTML += "<ul >" +
						"<li><img src=" + data[i].imgurl + " > </li>" +
						"<li>" + data[i].name + "</li>" +
						"<li>" + "颜色：" + data[i].color + "</li>" +
						"<li>" + "原价：￥" + data[i].price + "</li>" +
						"<li>" + "现价：￥" + data[i].sale + "</li>" +
						"<li>" + "销量：" + data[i].sales + "</li>" +
						"<li>" + "评价：" + data[i].evaluate + "</li>" +
						"</ul>"
				}
			}
			fn()
		</script>
	</body>
</html>
